<template>
    <div class="operationRate">
        <!-- 头部 -->
        <topContainer @getId='getId' :name='topName'  @fullscreen='fullscreen' @setBoard="setBoard"></topContainer>

        <div class="boardContainer">
            <echartCommon ref="rate" id-name="rate" :chartHeight="'100%'"></echartCommon>
        </div>

        <setBoard ref="setBoard" @confirm="confirm"></setBoard>
    </div>
</template>

<script>
    import {
        rateDashboard
    } from '@/api/deviceController'
    import {
        rateOption
    } from "../screen/echartOptions";
    import {
        getSearchCache
    } from '@/api/produceController'
    import echartCommon from "../screen/echartCommon.vue";
    import setBoard from './setBoard.vue'
    export default {
        data() {
            return {
                topName: '开机率看板',
                groupId: '',
            }
        },
        components: {
            echartCommon,
            setBoard
        },
        mounted() {
        },
        methods: {
            //分组id
            getId(groupId) {
                this.groupId = groupId
                this.getSearchCacheFn({
                    cacheName: 'operationRate:set',
                    type: 0
                }).then(() => {
                    this.handleInterface()
                })
            },
            //看板列表
            getRateDashboard: async function (data) {
                const res = await rateDashboard(data)
                if (res.code == 200) {
                    const {
                        interval
                    } = this.cacheInfo
                    this.$refs.rate.show(rateOption(res.data))
                    clearInterval(window.rateTimer)
                    window.rateTimer = setInterval(() => {
                        this.handleInterface()
                    }, interval * 1000)
                }
            },
            //获取缓存信息
            getSearchCacheFn: async function (data) {
                const res = await getSearchCache(data)
                this.cacheInfo = res.data !== null ? JSON.parse(res.data) : {
                    limit: 9,
                    interval: 10,
                    showClose: false,
                    orderByGreenRate: false
                }
            },
            fullscreen(isFull) {
                let elem = document.querySelector(".operationRate");
                isFull ? elem.requestFullscreen() : document.exitFullscreen()
            },
            setBoard() {
                let jsonData = JSON.parse(JSON.stringify(this.cacheInfo))
                this.$refs.setBoard.open(jsonData)
            },
            confirm(form) {
                this.cacheInfo = form
                this.handleInterface()
            },
            handleInterface() {
                const {limit,showClose,orderByGreenRate} = this.cacheInfo
                this.getRateDashboard({
                    groupId: this.groupId,
                    limit,
                    showClose,
                    orderByGreenRate: orderByGreenRate ? 1 : 0 
                })
            }
        },
        beforeRouteLeave(to, from, next){
            clearInterval(window.rateTimer)
            next()
        }
    }
</script>

<style lang="less" scoped>
    .operationRate {
        padding: 20px;
        background-color: #000;
        overflow-y: auto;
        height: 100%;

        .boardContainer {
            border: 1px solid rgba(58, 200, 243, .8);
            height: calc(100% - 76px);
        }
    }
</style>